<template>
    <div class="card-item" :style="'background: ' + (disabled ? '#D8D8D8' : item.bcolor)">
        <div class="head">
            <div class="left">
                <img class="icon" src="@/static/images/common/shop.png" />
                {{ item.studyhallName || '' }}
            </div>
            <u-button
                v-if="type === 'settle'"
                shape="circle"
                color="#5428EC"
                size="mini"
                text="使用"
                @click="use"
                :customStyle="{ width: '64rpx', minWidth: '68rpx', fontSize: '24rpx', margin: 0 }"
            ></u-button>
        </div>
        <div class="info" @click="toDetail">
            <div class="type-area">
                <p class="type">{{ item.name || '' }}</p>
                <div class="area">
                    {{
                        (
                            (item.applySeatTypes || []).map(e => {
                                return e.name;
                            }) || []
                        ).join('、')
                    }}可用
                </div>
            </div>
            <div class="desc">
                <span class="label">有效期至</span>
                <span class="value">{{
                    item.introduction || item.validityPeriodDescription || ''
                }}</span>
            </div>
            <div class="buy" v-if="type === 'buy'">
                <p class="price"><span class="unit">¥</span>{{ item.price | formatMoney(2) }}</p>
                <u-button
                    color="#FA6400"
                    size="normal"
                    text="购买"
                    shape="circle"
                    :customStyle="{ width: '152rpx', margin: 0 }"
                    @click="toBuy"
                ></u-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CardItem',
    props: {
        studyhallId: {
            type: Number,
            default: () => {
                return null;
            },
        },
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        type: {
            type: String,
            default: () => {
                return '';
            },
        },
        disabled: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    methods: {
        toDetail() {
            if (this.type === 'settle') {
                uni.navigateTo({
                    url: '/pages/card/settle?orderId=' + this.item.orderId,
                });
            }
        },
        use() {
            uni.navigateTo({
                url:
                    '/pages/reserve/settle?id=' + this.item.studyhallId + '&cardId=' + this.item.id,
            });
        },
        toBuy() {
            uni.navigateTo({
                url:
                    '/pages/card/settle?spuId=' + this.item.id + '&studyhallId=' + this.studyhallId,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.card-item {
    width: 100%;
    border-radius: 24rpx;
    .head {
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1rpx dashed #fff;
        padding: 26rpx 20rpx 12rpx 30rpx;
        @include flexBox(space-between, center);
        .left {
            font-size: 24rpx;
            font-weight: 500;
            color: #2f2f2f;
            @include flexBox(flex-start, center);
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 10rpx;
            }
        }
    }
    .info {
        width: 100%;
        padding: 18rpx 32rpx;
        box-sizing: border-box;
        .type-area {
            @include flexBox(flex-start, flex-end);
            .type {
                font-size: 40rpx;
                font-weight: 600;
                color: #2f2f2f;
                margin-right: 16rpx;
                white-space: nowrap;
            }
            .area {
                color: #fff;
                font-size: 26rpx;
                padding: 2rpx 12rpx;
                background: #a65353;
                border-radius: 4rpx;
                margin-left: 20rpx;
                @include ellipsis(1);
            }
        }
        .desc {
            margin-top: 16rpx;
            padding-bottom: 20rpx;
            @include flexBox(flex-start, center);
            .label {
                font-size: 24rpx;
                color: #5c5c5c;
            }
            .value {
                font-size: 24rpx;
                color: #2f2f2f;
                margin-left: 20rpx;
            }
        }
        .buy {
            margin-top: 60rpx;
            @include flexBox(space-between, center);
            .price {
                color: #fa6400;
                font-size: 36rpx;
                font-weight: 600;
                @include flexBox(flex-start, flex-end);
                .unit {
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>
